<template>
  <view class="settings-page">

    <!-- 用户信息卡片 -->
    <view class="user-card" @click="gotoProfileEdit">
      <view class="user-avatar-container">
        <image :src="userInfo.avatar" alt="用户头像" class="user-avatar"></image>
        <view class="edit-avatar-mask">
          <uni-icons type="camera" size="20" color="#fff"></uni-icons>
        </view>
      </view>
      
      <view class="user-info">
        <view class="user-name">{{ userInfo.name }}</view>
        <view class="user-signature">{{ userInfo.signature || '点击编辑个人签名' }}</view>
      </view>
      
      <view class="card-arrow">
        <uni-icons type="right" size="20" color="#86909C"></uni-icons>
      </view>
    </view>

    <!-- 设置内容区域 -->
    <scroll-view scroll-y class="settings-scroll">
      <!-- 账户信息设置 -->
      <view class="settings-card">
        <view class="setting-item" @click="gotoProfileEdit">
          <view class="item-icon">
            <uni-icons type="idcard" size="22" color="#4096ff"></uni-icons>
          </view>
          <view class="item-content">
            <text class="item-title">个人资料</text>
            <text class="item-desc">编辑头像、昵称和签名等</text>
          </view>
          <view class="item-arrow">
            <uni-icons type="right" size="18" color="#86909C"></uni-icons>
          </view>
        </view>
        
        <view class="setting-item" @click="gotoAccountSecurity">
          <view class="item-icon">
            <uni-icons type="lock" size="22" color="#4096ff"></uni-icons>
          </view>
          <view class="item-content">
            <text class="item-title">账号与安全</text>
            <text class="item-desc">绑定手机、修改密码</text>
          </view>
          <view class="item-arrow">
            <uni-icons type="right" size="18" color="#86909C"></uni-icons>
          </view>
        </view>
      </view>
      
      <!-- 通用设置 -->
      <view class="settings-card">
        <view class="setting-item toggle-item">
          <view class="item-icon">
            <uni-icons type="picture" size="22" color="#f5a623"></uni-icons>
          </view>
          <view class="item-content">
            <text class="item-title">自动压缩图片</text>
            <text class="item-desc">上传图片时自动压缩</text>
          </view>
          <view class="item-toggle">
            <view class="custom-switch" :class="{ active: autoCompressImages }" @click="onCompressChange(!autoCompressImages)">
              <view class="switch-circle"></view>
            </view>
          </view>
        </view>
        
        <view class="setting-item" @click="clearCache">
          <view class="item-icon">
            <uni-icons type="trash" size="22" color="#f5a623"></uni-icons>
          </view>
          <view class="item-content">
            <text class="item-title">清除缓存</text>
            <text class="item-desc">{{ cacheSize }} MB</text>
          </view>
          <view class="item-arrow">
            <uni-icons type="right" size="18" color="#86909C"></uni-icons>
          </view>
        </view>
        
        <view class="setting-item" @click="gotoAbout">
          <view class="item-icon">
            <uni-icons type="info" size="22" color="#f5a623"></uni-icons>
          </view>
          <view class="item-content">
            <text class="item-title">关于我们</text>
            <text class="item-desc">版本号 v{{ appVersion }}</text>
          </view>
          <view class="item-arrow">
            <uni-icons type="right" size="18" color="#86909C"></uni-icons>
          </view>
        </view>
      </view>
      
      <!-- 退出登录 -->
      <view class="logout-section">
        <button class="logout-btn" @click="confirmLogout">
          <uni-icons type="logout" size="18" class="logout-icon"></uni-icons>
          <text>退出登录</text>
        </button>
      </view>
      
      <!-- 底部留白 -->
      <view class="bottom-padding"></view>
    </scroll-view>
    
    <!-- 清除缓存确认弹窗 -->
    <uni-popup 
      ref="clearCachePopup" 
      type="dialog" 
      :mask-click="false"
      @confirm="doClearCache"
      @cancel="cancelClearCache"
    >
      <uni-popup-dialog 
        title="清除缓存" 
        content="确定要清除所有缓存数据吗？这不会影响您的账号数据。"
        confirm-text="清除"
        cancel-text="取消"
      ></uni-popup-dialog>
    </uni-popup>
    
    <!-- 退出登录确认弹窗 -->
    <uni-popup 
      ref="logoutPopup" 
      type="dialog" 
      :mask-click="false"
      @confirm="doLogout"
      @cancel="cancelLogout"
    >
      <uni-popup-dialog 
        title="退出登录" 
        content="确定要退出当前账号吗？您需要重新登录才能使用社区功能。"
        confirm-text="退出"
        cancel-text="取消"
      ></uni-popup-dialog>
    </uni-popup>
    
    <!-- 操作结果提示 -->
    <uni-toast ref="toast" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 用户信息
      userInfo: {
        avatar: 'https://picsum.photos/id/1012/200/200',
        name: '飞手小李',
        signature: '专注无人机航拍5年，分享飞行技巧与设备体验'
      },
      
      // 隐私设置
      allowStrangerMessage: true,
      publicFollowList: false,
      watermarkEnabled: true,
      
      // 通用设置
      darkModeEnabled: false,
      autoCompressImages: true,
      cacheSize: 8.6,
      appVersion: '1.3.2'
    };
  },
  
  onLoad() {
    // 从本地存储加载设置
    this.loadSettings();
  },
  
  methods: {
    // 返回上一页
    navBack() {
      uni.navigateBack();
    },
    
    // 加载保存的设置
    loadSettings() {
      const savedSettings = uni.getStorageSync('userSettings') || {};
      
      // 加载隐私设置
      if (savedSettings.allowStrangerMessage !== undefined) {
        this.allowStrangerMessage = savedSettings.allowStrangerMessage;
      }
      if (savedSettings.publicFollowList !== undefined) {
        this.publicFollowList = savedSettings.publicFollowList;
      }
      if (savedSettings.watermarkEnabled !== undefined) {
        this.watermarkEnabled = savedSettings.watermarkEnabled;
      }
      
      // 加载通用设置
      if (savedSettings.darkModeEnabled !== undefined) {
        this.darkModeEnabled = savedSettings.darkModeEnabled;
      }
      if (savedSettings.autoCompressImages !== undefined) {
        this.autoCompressImages = savedSettings.autoCompressImages;
      }
    },
    
    // 保存设置到本地存储
    saveSettings() {
      const settings = {
        allowStrangerMessage: this.allowStrangerMessage,
        publicFollowList: this.publicFollowList,
        watermarkEnabled: this.watermarkEnabled,
        darkModeEnabled: this.darkModeEnabled,
        autoCompressImages: this.autoCompressImages
      };
      
      uni.setStorageSync('userSettings', settings);
    },
    
    // 允许陌生人私信设置变更
    onAllowStrangerChange(value) {
      this.allowStrangerMessage = value;
      this.saveSettings();
      this.showToast(this.allowStrangerMessage ? '已允许陌生人私信' : '已禁止陌生人私信');
    },
    
    // 公开关注列表设置变更
    onPublicFollowChange(value) {
      this.publicFollowList = value;
      this.saveSettings();
      this.showToast(this.publicFollowList ? '已公开关注列表' : '已隐藏关注列表');
    },
    
    // 水印设置变更
    onWatermarkChange(value) {
      this.watermarkEnabled = value;
      this.saveSettings();
      this.showToast(this.watermarkEnabled ? '已开启水印' : '已关闭水印');
    },
    
    // 深色模式设置变更
    onDarkModeChange(value) {
      this.darkModeEnabled = value;
      this.saveSettings();
      this.showToast(this.darkModeEnabled ? '已开启深色模式' : '已关闭深色模式');
    },
    
    // 图片压缩设置变更
    onCompressChange(value) {
      this.autoCompressImages = value;
      this.saveSettings();
      this.showToast(this.autoCompressImages ? '已开启自动压缩' : '已关闭自动压缩');
    },
    
    // 清除缓存
    clearCache() {
      this.$refs.clearCachePopup.open();
    },
    
    // 执行清除缓存
    doClearCache() {
      // 模拟清除缓存操作
      uni.showLoading({
        title: '清除中...',
        mask: true
      });
      
      setTimeout(() => {
        uni.hideLoading();
        this.cacheSize = 0;
        this.showToast('缓存已清除');
      }, 1500);
    },
    
    // 取消清除缓存
    cancelClearCache() {
      // 无需额外操作
    },
    
    // 确认退出登录
    confirmLogout() {
      this.$refs.logoutPopup.open();
    },
    
    // 执行退出登录
    doLogout() {
      // 模拟退出登录操作
      uni.showLoading({
        title: '退出中...',
        mask: true
      });
      
      setTimeout(() => {
        uni.hideLoading();
        
        // 清除登录状态
        uni.removeStorageSync('token');
        uni.removeStorageSync('userInfo');
        
        // 跳转到登录页
        uni.reLaunch({
          url: '/pages/login/login'
        });
      }, 1500);
    },
    
    // 取消退出登录
    cancelLogout() {
      // 无需额外操作
    },
    
    // 显示提示消息
    showToast(message) {
      this.$refs.toast.show({
        title: message,
        duration: 2000
      });
    },
    
    // 页面跳转
    gotoProfileEdit() {
      uni.navigateTo({
        url: '/pages/mine/profile-edit'
      });
    },
    
    gotoAccountSecurity() {
      uni.navigateTo({
        url: '/pages/mine/account-security'
      });
    },
    
    gotoNotificationSettings() {
      uni.navigateTo({
        url: '/pages/message/notification-settings'
      });
    },
    
    gotoBlacklist() {
      uni.navigateTo({
        url: '/pages/mine/blacklist'
      });
    },
    
    gotoAbout() {
      uni.navigateTo({
        url: '/pages/mine/about'
      });
    }
  }
};
</script>

<style scoped lang="scss">
// 颜色变量
$primary: #4096ff;
$primary-light: #e8f3ff;
$purple: #722ed1;
$purple-light: #f2eaff;
$orange: #f5a623;
$orange-light: #fff7e8;
$danger: #ff4d4f;
$danger-light: #fff1f0;
$text-primary: #1d2129;
$text-secondary: #4e5969;
$text-tertiary: #86909c;
$bg-light: #f7f8fa;
$bg-white: #ffffff;
$border-light: #e5e6eb;
$card-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
$hover-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);

.settings-page {
  background-color: $bg-light;
  min-height: 100vh;
  padding-top: var(--status-bar-height);
}

// 导航栏
.navbar {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 16px;
  background-color: $bg-white;
  border-bottom: 1px solid $border-light;
  
  .back-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: $text-secondary;
    transition: background-color 0.2s;
    
    &:active {
      background-color: $bg-light;
    }
  }
  
  .nav-title {
    font-size: 18px;
    font-weight: 600;
    color: $text-primary;
    flex: 1;
    text-align: center;
  }
  
  .nav-placeholder {
    width: 40px;
    height: 40px;
  }
}

// 用户信息卡片
.user-card {
  display: flex;
  align-items: center;
  padding: 20px 16px;
  margin: 16px;
  background-color: $bg-white;
  border-radius: 12px;
  box-shadow: $card-shadow;
  transition: box-shadow 0.3s;
  
  &:active {
    box-shadow: $hover-shadow;
  }
  
  .user-avatar-container {
    position: relative;
    margin-right: 16px;
    
    .user-avatar {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid $primary-light;
    }
    
    .edit-avatar-mask {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 28px;
      height: 28px;
      background-color: $primary;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 6px rgba(64, 150, 255, 0.4);
    }
  }
  
  .user-info {
    flex: 1;
    min-width: 0;
    
    .user-name {
      font-size: 18px;
      font-weight: 600;
      color: $text-primary;
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .user-signature {
      font-size: 14px;
      color: $text-tertiary;
      line-height: 1.5;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }
  
  .card-arrow {
    padding: 8px;
    opacity: 0.7;
  }
}

// 设置内容滚动区域
.settings-scroll {
  height: calc(100vh - var(--status-bar-height) - 48px - 136px);
  padding-bottom: 16px;
}

// 设置卡片
.settings-card {
  background-color: $bg-white;
  border-radius: 12px;
  box-shadow: $card-shadow;
  margin: 0 16px 16px;
  overflow: hidden;
  transition: box-shadow 0.3s;
  
  &:active {
    box-shadow: $hover-shadow;
  }
  
  .section-header {
    display: flex;
    align-items: center;
    padding: 16px 16px 12px;
    
    .section-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
      color: white;
    }
    
    .account-icon {
      background: linear-gradient(135deg, #4096ff, #6aa8ff);
    }
    
    .privacy-icon {
      background: linear-gradient(135deg, #722ed1, #9359e7);
    }
    
    .general-icon {
      background: linear-gradient(135deg, #f5a623, #ffc56d);
    }
    
    .section-title {
      font-size: 16px;
      font-weight: 600;
      color: $text-primary;
    }
  }
  
  .setting-item {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid $border-light;
    transition: background-color 0.2s;
    
    &:last-child {
      border-bottom: none;
    }
    
    &:active {
      background-color: $bg-light;
    }
    
    .item-icon {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 14px;
      border-radius: 8px;
    }
    
    .item-content {
      flex: 1;
      min-width: 0;
      
      .item-title {
        font-size: 16px;
        color: $text-primary;
        display: block;
        margin-bottom: 2px;
      }
      
      .item-desc {
        font-size: 13px;
        color: $text-tertiary;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    
    .item-arrow, .item-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

// 自定义开关
.custom-switch {
  width: 50px;
  height: 26px;
  background-color: #e5e6eb;
  border-radius: 13px;
  position: relative;
  transition: background-color 0.3s;
  
  &.active {
    background-color: $primary;
  }
  
  .switch-circle {
    width: 22px;
    height: 22px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
  }
  
  &.active .switch-circle {
    transform: translateX(24px);
  }
}

// 退出登录区域
.logout-section {
  padding: 20px 16px;
  
  .logout-btn {
    width: 100%;
    height: 48px;
    background-color: $danger-light;
    color: $danger;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    
    .logout-icon {
      margin-right: 8px;
    }
    
    &:active {
      background-color: rgba(255, 77, 79, 0.15);
    }
  }
}

// 底部留白
.bottom-padding {
  height: 20px;
}

// 动画效果
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

// 为各个区块添加入场动画
.user-card, .settings-card, .logout-section {
  animation: slideUp 0.3s ease-out forwards;
  opacity: 0;
}

.user-card {
  animation-delay: 0.1s;
}

.settings-card:nth-child(1) {
  animation-delay: 0.2s;
}

.settings-card:nth-child(2) {
  animation-delay: 0.3s;
}

.settings-card:nth-child(3) {
  animation-delay: 0.4s;
}

.logout-section {
  animation-delay: 0.5s;
}
</style>
    